<template>
  <div>
      <div class="video_head">
        <div class="sea_wrap">
          <el-input v-model="seaText"></el-input>
          <el-button type="success" @click="tosearch">查询</el-button>
        </div>
        <el-button type="primary" @click="openDia">添加视频</el-button>
      </div>
      <!-- 添加视频弹出层 -->
         <teleport to='#videoModel' >
              <el-dialog width="40%" v-model="$store.state.videoFlag" :title="videotitle">
                  <el-form>
                    <el-form-item label="视频上传：">
                      <input @change="upvideo($event)" type="file" hidden id="myvideo">
                      <el-input v-model="Vurl" disabled></el-input> <el-button @click="selVideo" type="primary">选择视频</el-button>
                    </el-form-item>
                      <el-form-item label="视频名称：">
                      <el-input v-model="Vname"></el-input> 
                    </el-form-item>
                     <el-form-item label="视频时长：">
                      <el-input v-model="Vtime"></el-input> 
                    </el-form-item>
                  </el-form>
                  <template #footer>
                    <div>
                        <el-button  @click="addVideos" type="primary">{{videobtn}}</el-button>
                         <el-button @click="closeDia" type="success">取消</el-button>
                    </div>
                  </template>
              </el-dialog>
        </teleport>
  </div>
</template>

<script lang="ts">
import {defineComponent,ref} from 'vue'
import {useStore} from 'vuex'
import {upVideoApi,addVideoApi,editVideo} from '../../api/video'
import { ElMessage } from 'element-plus';
import $bus from '../../utils/bus'
export default defineComponent({
    emits:{
      seachange:null,
      addchange:null
    },
    setup(props,context){
        let seaText=ref('');//搜索框的值
        let tosearch=()=>{ //点击搜素
            context.emit("seachange",seaText.value)
        }
        let store=useStore();
        let openDia=()=>{ //打开弹出层
            store.commit("changeVideoFlag",true)
        }
        let closeDia=()=>{
            store.commit("changeVideoFlag",false)
        }
        let selVideo=()=>{//选择视频点击
            var myvideo=document.getElementById("myvideo");
            (myvideo as HTMLInputElement).click();
        }
        let Vurl=ref('');//视频地址
        let Vname=ref('')//视频名称：
        let Vtime=ref('')//视频时长
        // 上传视频
        let upvideo=async (e:any)=>{
              var formdata:FormData=new FormData();
              var upfil=e.target.files[0];//获取文件框的数据包
              // formdata.append(key,视频数据包)
            formdata.append(new Date().getTime().toString(),upfil)
              // 上传视频接口
                var res:any=await upVideoApi(formdata)
                console.log(res)
                if(res.success){
                  Vurl.value=res.cacheName
                }
         }
        
        let videotitle=ref('添加视频');
        let videobtn=ref('添加');
        let editId=ref(''); //修改id
        // 接受兄弟组件传来的数据
        $bus.on("sendrow",(row:any)=>{
               Vname.value=row.Vname;
              Vtime.value=row.Vtime;
              Vurl.value=row.Vurl;
              editId.value=row.ID;
              videotitle.value="编辑视频";
              videobtn.value="确认修改"
             store.commit("changeVideoFlag",true)
        })
    // 添加和修改视频接口
        let addVideos=async ()=>{
            if(editId.value){
              // 修改视频
                var editRef=await editVideo({
                        ID:editId.value,
                        Vname: Vname.value,
                        Vtime: Vtime.value,
                        Vurl: Vurl.value
                })
                 ElMessage.success("修改视频成功")
            }else{
              // 添加视频
                  var res=await addVideoApi({
                        Vname: Vname.value,
                        Vtime: Vtime.value,
                        Vurl: Vurl.value
                  })
                   ElMessage.success("添加视频成功")
            }

               editId.value="";
              videotitle.value="添加视频";
              videobtn.value="添加"
              // 关闭弹出层
             store.commit("changeVideoFlag",false)
            //  触发父组件从新获取列表
             context.emit("addchange")
              Vname.value=""
              Vtime.value=""
              Vurl.value=""
            console.log(res)
        }
        return {
          videotitle,
          videobtn,
          upvideo,
          seaText,
          tosearch,
          openDia,
          closeDia,
          selVideo,
          Vurl,
          Vtime,
          Vname,
          addVideos
        }
    }
})
</script>
<style lang="less">
    .video_head{
      height: 50px;
      margin: 20px auto;
      background: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 40px;
      box-sizing: border-box;
      .sea_wrap{
        display: flex;

      }
    }

    // 写页面
    // 写效果
    // 数据交互
    
</style>